<?xml version="1.0" encoding="ISO-8859-5" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5" />
<link rel="stylesheet" href="../../../css/common.css" />
<link rel="stylesheet" href="../../../css/palette.css" />
<script type="text/javascript" src="../../../../js/prototype.js"></script>
<script type="text/javascript" src="../../../../js/wcme-common.js"></script>
<script type="text/javascript" src="../../../../js/wcme-contextMenu.js"></script>
<script type="text/javascript" src="../../../../js/wcme-colorGrid.js"></script>
<script type="text/javascript" src="../../../../js/wcme-palette.js"></script>
<script type="text/javascript" src="../../../../js/wcme-range.js"></script>
<script type="text/javascript" src="../../../../js/wcme-frame.js"></script>
<script type="text/javascript" src="../../../../js/wcme-selection.js"></script>
<script language="javascript">
<!--
function debug( str )
{
  return
//  var editframe = document.getElementById('iframe1')
//  var frameWin = editframe.contentWindow;
//  var framedoc = frameWin.document;
//  if( framedoc.selection ) 
//  {
//    alert( str + ' selected=' + framedoc.selection.createRange().text );
//  }
//  var str = 'aaa<br> &amp; bb<BR> cc&nbsp;ddd';
//  arstr = str.split(/<br>|<BR>/);
//  str = str.stripTags();
//  alert( '0: ' + arstr[0] + '\n1:' + arstr[1] + '\n2:' + arstr[2] );  
  var delim = (Prototype.Browser.IE)?'<BR>':'<br>';
  var sitename=(Prototype.Browser.IE)?
    "<BR>Welcome to<BR><BR> JavaScript Kit<BR>" :
    "<br>Welcome to<br><br> JavaScript Kit<br>" ;
  var words=sitename.split(delim) //split using blank space as delimitertext.split(/<br>/i);
  alert('size=' + words.length )
  for (i=0; i<words.length; i++)
    alert(words[i]) //alerts "Welcome", "to", "JavaScript", and "Kit"
}
//-->
</script>
<title>Style Palette</title>
</head>
<body>
<!--  
<div class="frame" id="palette">
  <div class="title">
    WcmE
  </div>
  <select class="combo" id="palette.fontfamily">
    <option class="odd" value="" selected="selected" label=" "> </option>
    <option class="even" value="serif" label="Serif">Serif</option>
    <option class="odd" value="sans-serif" label="Sans-Serif">Sans-Serif</option>
    <option class="even" value="cursive" label="Cursive">Cursive</option>
    <option class="odd" value="fantasy" label="Fantasy">Fantasy</option>
    <option class="even" value="monospace" label="Monospace">Monospace</option>
  </select>
  <select class="combo" id="palette.size" >
    <option class="odd" value="" selected="selected" label=" "> </option>
    <option class="even" value="8pt" label=" 8">8</option>
    <option class="odd" value="10pt" label="10">10</option>
    <option class="even" value="12pt" label="12">12</option>
    <option class="odd" value="14pt" label="14">14</option>
    <option class="even" value="18pt" label="18">18</option>
    <option class="odd" value="24pt" label="24">24</option>
    <option class="even" value="36pt" label="36">36</option>
  </select>
  <a class="item" id="palette.plus" style="">
    +
  </a>
  <a class="item" id="palette.minus" style="">
    -
  </a>
  <div class="item" id="palette.fgcol">
    A
  </div>
  <div class="item" id="palette.bgcol" style="color: white;background-color: black;">
    A
  </div>
  <a class="item" id="palette.bold" style="font-weight: bold;">
    B
  </a>
  <a class="item" id="palette.italic" style="font-style: italic;">
    I
  </a>
  <a class="item" id="palette.underline" style="text-decoration: underline;">
    U
  </a>
  <a class="item" id="palette.linethrough" style="text-decoration: line-through;">
    L
  </a>
  <a class="item" id="palette.super">
    A<span style="vertical-align: super;font-size:8px;">a</span>
  </a>
  <a class="item" id="palette.sub">
    A<span style="vertical-align: sub;font-size:8px;">a</span>
  </a>
</div>
-->
<div>
  <textarea style="width: 200px; height: 100px;"
            rows="2" cols="2" OnClick="debug()"
  > aaa - ddd - bbb - ccc
  </textarea>
</div>
<div style="border:1px solid black;margin:1px;padding:1px;">
  <div style="float:left;border:1px solid red;margin:1px;padding:1px;">A</div>
  <div  style="border:1px solid blue;margin:1px;padding:1px;">B</div>
</div>
<div style="width: 700px;">
  <div style="float: left;">
<p>When you come to edit mode paletta element is opened on top of WCME. Now you can select 
a piece of text inside of WCME and assign a some attributes for this selection. Selection is keeping while 
you do not click on WCME so you can apply a few attributes for one time selected text.</p>  
There is a rigth click context menu under the mode:
<ul style="list-style: decimal;">
<li>
 'Save' - save content of WCME on server site persistently.
</li>
<li>
 'Quit' - leave edit mode but keep the all changes you made.
</li>
<li>
 'HTML/Rich Text' - swith between HTML view and usual browser view.
</li>
<li>
 'Cancel' - cancel all changes and leave edit mode.
</li>
</ul>
  </div>
  <div id="editarea1" class="editarea" style="float: left;"></div>
  <div id="editarea2" class="editarea" style="float: left;"></div>
</div>

  <script type="text/javascript">
  var cme1,cme2;
  initPage( function()
    { 
      cme1 = new CMEFrame( 'editarea1', 'iframe1' ); 
      cme2 = new CMEFrame( 'editarea2', 'iframe2' );
//      cme1.load(); cme2.load(); //alert('after all');
    });   
  </script>

</body>
</html>